<template>
	<view>
		<!-- <view class="sticky-box" style="width: 100%;margin: 0 auto;display: flex;text-align: center;line-height: 96rpx;background-color: #F4F1F1;">
			<view @click="zuixin(3)" style="flex: 1;position: relative;" :class="tabIndex==3?'actives':'as'">
				全部
				<image v-if="tabIndex==3"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png"
					style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>
			<view @click="zuixin(0)" style="flex: 1;position: relative;" :class="tabIndex==0?'actives':'as'">
				待审核
				<image v-if="tabIndex==0"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>
			<view @click="zuixin(1)" style="flex: 1;position: relative;" :class="tabIndex==1?'actives':'as'">
				已通过
				<image v-if="tabIndex==1"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>
			<view @click="zuixin(2)" style="flex: 1;position: relative;" :class="tabIndex==2?'actives':'as'">
				已拒绝
				<image v-if="tabIndex==2"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>
		</view> -->
		<view style="width: 92%;margin: 20rpx auto 0;">
			<view @click="tiao(item.id)" v-for="(item,index) in list" :key='index' style="overflow: hidden;background-color: #FFFFFF;box-sizing: border-box;padding: 30rpx;border-radius: 20rpx;margin-bottom: 20rpx;">
				<view style="overflow: hidden;">
					<view style="color: #000000;font-size: 28rpx;font-weight: 600;line-height: 50rpx;max-width: 400rpx;float: left;" class="yihang">
						{{item.name}}
						<!-- <text v-if="item.distance"
							style="color: #999999;font-size: 24rpx;float: right;">{{item.distance}}</text> -->
					</view>
					<view @click.stop="gundong(index,item.id)" style="color:#fff;font-size: 24rpx;background-color: #1fb0ac;height: 50rpx;line-height: 50rpx;text-align: center;border-radius: 26rpx;width: 160rpx;float: right;">
						退出此市场
					</view>
					<!-- <view style="line-height: 40rpx;color: #999999;font-size: 24rpx;margin: 10rpx 0;">
						<text class="iconfont icon-dizhi"
							style="font-size: 24rpx;color: #999999;margin-right: 10rpx;"></text>
						{{item.address}}
					</view>
					<view style="line-height: 50rpx;">
						<text
							style="color: #C89F57;font-size: 22rpx;padding: 6rpx 20rpx;border-radius: 20rpx;border: 1px solid #C89F57;">
							{{item.firm_num || 0}}个商家
						</text>
					</view> -->
				</view>

			</view>
			<view style="text-align: center;margin-top: 50rpx;">
				<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
				<view style="width: 80%;margin: 0 auto;">
					<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无入驻市场" v-if="list.length==0"></u-divider>
					<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多入驻市场" v-if="list.length>0 && enmpy"></u-divider>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				page:1,
				list:[],
				enmpy:false,
				kk:false,
				tabIndex:3
			}
		},

		onLoad() {

		},
		onShow() {
			this.page=1
			this.enmpy=false
			this.kk=false
			this.list=[]
			this.wdgz()
		},
		onReachBottom: function() {
			console.log(222222222)
			if (this.enmpy) {
				return
			} else {
				this.wdgz()
			}
		},
		methods:{
			gundong:function(index,id){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定退出该市场吗',
					success: function (res) {
						if (res.confirm) {
							that.post('api/client/ref_bazaars',{bazaar_id:id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									that.list.splice(index,1)
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			tiao:function(id,status){
				uni.navigateTo({
					url:'/fenbao/pages/wenzhang/shichang?id='+id
				})

			},
			zuixin:function(index){
				this.tabIndex=index
				this.page=1
				this.list=[]
				this.kk=false
				this.enmpy=false
				this.wdgz()
			},
			// 我的关注
			wdgz:function(){
				let data={
					status:this.tabIndex,
					page:this.page,
					limit:10
				}
				this.post('api/client/bazaars_shop',data,true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},


		}
	}
</script>

<style lang="scss">
	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 10;
		flex-direction: row;
		margin: 0px;
		// padding: 15px 0 15px 0;
		// background-color: #F4F5F6;
		// border-bottom-style: solid;
		// border-bottom-color: #E2E2E2;
	}
	.actives{
		color: #000000;
		font-size: 30rpx;
		opacity: 1;
	}
	.as{
		color: #000000;
		font-size: 30rpx;
		opacity: 0.7;
	}
	page{
		background-color: #F4F1F1!important;
		padding-bottom: 30rpx;
		font-family: Demibold;
	}
</style>
